const path = require('path');
// SASS提取成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// HTML动态生成
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  OUTPUT_DIR: 'dist',
  generate(isProd) {
    return {
      entry: {
        main: './app/src/index.ts'
      },
      output: {
        filename: isProd ? '[name].bundle.[contenthash].js' : '[name].bundle.js',
        path: path.resolve(__dirname, OUTPUT_DIR)
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          },
          {
            test: /\.(sa|sc|c)ss$/,
            use: [
              isProd ? MiniCssExtractPlugin.loader : 'style-loader',
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true,
                }
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true,
                }
              },
            ]
          }
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: isProd ? '[name].[hash].css' : '[name].css',
          chunkFilename: isProd ? '[id].[hash].css' : '[id].css',
        }),
        new HtmlWebpackPlugin({ title: 'Pixi.js Test!' }),
      ],
    };
  }
}
